import React, {PureComponent} from "react"
import {CheckOutlined, EditOutlined, ManOutlined, WomanOutlined} from '@ant-design/icons';
import {Form} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {Alert, Button, Cascader, Drawer, Input, Radio, Tabs} from "antd";
import {Sticky, StickyContainer} from 'react-sticky'
import profileCompose, {createAvatarPanel} from "./compose"
import "./index.less"
import {withRouter} from "react-router"
import {avatarGroup} from "./avatar"
import {appContext} from "context/app-context"
import {regex_email, regex_mobile} from "project-config"
import {defaultSize} from "../../../../shared/project-config"
import AvatarLoader from "libs/avatar-loader"
import {formItemLayout} from "../../../layouts/layout"
import area, {areaFilter} from "libs/area"

const form = Form.create()

const renderTabBar = (props, DefaultTabBar) => (
	<Sticky bottomOffset={0}>
		{(style) => (
			<DefaultTabBar {...props} style={{...style, zIndex: 1}}/>
		)}
	</Sticky>
)

const renderUserName = (userName, createType) => {
	if (createType === 'OPEN_USER_WX') return "微信用户"
	if (createType === 'OPEN_USER_QQ') return "QQ用户"
	if (createType === 'OPEN_USER') return "第三方用户"
	return userName
}

@withRouter
@appContext
@form
@profileCompose
export default class ProfileCard extends PureComponent {
	render() {

		const {
			onAvatarSelect, renderByMode, readOnly, onModeChange, avatarVisible, $avatarVisible,
			serverMsg, selectAvatar, context, onUpdateInfo, submitting,
		} = this.props
		const {userName, nickName, gender, phoneNo, realName, createTime, roles, idCard, email, avatar, province, city, county, createType} = context.userInfo
		const {getFieldDecorator} = this.props.form
		const userArea = [province, city, county].filter(i => i)
		const userAreaText = `${province || ''} ${city || ''} ${county || ''}`.trim() || '未填写'

		return (
			<div className={'profile-card'}>

				<div className={'user-info-box-left'}>
					<div className={'avatar'}>
						<AvatarLoader style={{
							width: 150,
							height: 150
						}} src={`${avatar}`}/>
					</div>

					{
						readOnly ? undefined :
							<Button type={'primary'}
							        onClick={() => $avatarVisible(true)}
							        style={{marginTop: '10px'}}>
								修改头像
							</Button>
					}

					<div className={'user-name'}>
						{renderUserName(userName, createType)}
						{
							(gender && gender === 'MALE')
								? <ManOutlined className={'man'}/>
								: (gender === 'FEMALE' ? <WomanOutlined className={'woman'}/> : undefined)
						}
					</div>

					<div className={'roles'}>
						{
							(roles || []).map(i => <div key={i.code}> {i.name}</div>)
						}
					</div>
				</div>

				<div className={'user-info-box-right'}>
					<div className={'user-header'}>
						{readOnly ? '' : '修改'}个人资料
					</div>
					{
						!serverMsg
							? undefined
							: <Alert message={serverMsg} type="error" showIcon className={'profile-error-message'} closable/>
					}

					<Form>

						{renderByMode(
							<div className={'info-row gender'}>
								{gender === 'MALE' ? '先生' : (gender === 'FEMALE' ? '女士' : '未填写')}
							</div>,
							<Form.Item>
								{getFieldDecorator('gender', {
									initialValue: gender,
									rules: [{required: true, message: '请选择一个称谓'}],
								})(
									<Radio.Group initialValue={gender} buttonStyle="solid">
										<Radio key={'male'} value="MALE"><ManOutlined className={'man'}/> 先生</Radio>
										<Radio key={'female'} value="FEMALE"><WomanOutlined className={'woman'}/> 女士</Radio>
									</Radio.Group>
								)}
							</Form.Item>,
							'称谓',
							' '
						)}


						{renderByMode(
							<div className={'info-row'}>
								{nickName || '未填写'}
							</div>,
							<Form.Item>
								{getFieldDecorator('nickName', {
									initialValue: nickName,
									rules: [{required: true, message: '请输入昵称'}, {max: 16, message: '最多输入16个字符'}],
								})(
									<Input placeholder="请输入昵称"/>
								)}
							</Form.Item>,
							'昵称'
						)}

						{renderByMode(
							<div className={'info-row'}>
								{phoneNo || '未填写'}
							</div>,
							<Form.Item>
								{getFieldDecorator('phoneNo', {
									initialValue: phoneNo,
									rules: [
										{required: true, message: '请输入手机号'},
										{pattern: regex_mobile, message: '请输入一个有效的国内手机号'}
									],
								})(
									<Input placeholder="请输入手机号"/>
								)}
							</Form.Item>,
							'手机号',
						)}


						{
							renderByMode(<div className={'info-row'}>
									{userAreaText}
								</div>,
								<Form.Item {...formItemLayout}>
									{getFieldDecorator('area', {
										initialValue: userArea,
										rules: [{required: true, message: '请选择地址所在地区'}],
									})(
										<Cascader options={area}
										          style={{width: '220px'}}
										          showSearch={areaFilter}
										          placeholder='请输入并选择地址所在地区'/>
									)}
								</Form.Item>,
								'所在地区')
						}


						{renderByMode(
							<div className={'info-row'}>
								{email || '未填写'}
							</div>,
							<Form.Item>
								{getFieldDecorator('email', {
									initialValue: email,
									rules: [
										{required: true, message: '请输入真实有效邮箱地址'},
										{pattern: regex_email, message: '请输入一个合法的邮箱地址'}
									],
								})(
									<Input placeholder="请输入真实有效邮箱地址"/>
								)}
							</Form.Item>,
							'邮箱',
						)}


						{renderByMode(
							<div className={'info-row'}>
								{realName || '未填写'}
							</div>,
							<Form.Item>
								{getFieldDecorator('realName', {
									initialValue: realName,
									rules: [
										{required: true, message: '请输入真实姓名'},
										{pattern: /^[\u4E00-\u9FA5\\.]{2,4}$/, message: '2-4位汉字'},
										{max: 16, message: '最多输入16个字符'}],
								})(
									<Input placeholder="请输入真实姓名"/>
								)}
							</Form.Item>,
							'真实姓名',
						)}


						{renderByMode(
							<div className={'info-row'}>
								{idCard || '未填写'}
							</div>,
							<Form.Item>
								{getFieldDecorator('idCard', {
									initialValue: idCard,
									rules: [{required: false, message: '请输入身份证号'}],
								})(
									<Input placeholder="请输入身份证号"/>
								)}
							</Form.Item>,
							'身份证号',
						)}

						{renderByMode(
							<div className={'info-row'}>
								{createTime}
							</div>,
							<div className={'info-row'}>
								{createTime}
							</div>,
							'创建时间',
						)}
					</Form>

					{
						readOnly ? undefined :
							<div className={'button-bar'}>
								<Button size={defaultSize}
								        onClick={onModeChange}>
									取消
								</Button>
								<div/>
								<Button size={defaultSize}
								        onClick={onUpdateInfo}
								        disabled={submitting}
								        loading={submitting}
								        type="primary">
									<CheckOutlined/> 保存更改
								</Button>
							</div>
					}

					{
						readOnly
							? <div className={'button-bar'}>
								<Button size={defaultSize} type={'primary'} onClick={onModeChange}><EditOutlined/> 编辑个人资料</Button>
							</div>
							: undefined
					}
				</div>

				<Drawer
					className={'avatar-drawer'}
					width={540}
					placement="right"
					closable={false}
					onClose={() => $avatarVisible(false)}
					visible={avatarVisible}
				>
					<StickyContainer>
						<Tabs defaultActiveKey="professions" size={'large'} renderTabBar={renderTabBar}>
							{
								avatarGroup.map(g => createAvatarPanel(g, onAvatarSelect, selectAvatar))
							}
						</Tabs>
					</StickyContainer>
				</Drawer>

			</div>
		);
	}
}